<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溢出</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 200px;
            height: 250px;
            background-color: aliceblue;
            overflow: auto;
        }
        .div2{
            width: 150px;
            height: 200px;
            background-color: rgb(26, 132, 224);
            overflow: hidden;
            /* white-space: nowrap; */
            /* 强制文本在一行内显示 */
            text-overflow: ellipsis;
            /* 单行文本溢出显示省略号需要同时设置：width、overflow：hidden、text-overflow：ellipsis */
        }
        /* 溢出属性（容器的）
        overflow：viside、hidden（隐藏）、scroll、auto（自动）、inherit 
        viside：默认值，一处内容会显示在元素外；
        hidden：溢出内容隐藏
        scroll：滚动，一处内容一滚动方式显示
        auto：如果有溢出会添加滚动条，没有溢出正常显示
        inherit：规定应该遵从父元素继承overflow属性的值
        overflow-x：X轴溢出
        overflow-y：Y轴溢出*/
        
        /* 空余空间：该属性用来处理元素内的空白
        white-space：normal、nowrap、pre、pre-wrap、pre-line、inherit 
        normal：默认值，空白会被浏览器忽略
        nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止
        pre:显示空格，回车，不换行
        pre-wrap：显示空格，回车，换行
        pre-line：显示回车，不显示空格，换行*/

        /* text-overflow：ellipsis（文本显示不完全---省略号效果） */
    </style>
</head>
<body>
    <div class="div1">
        <center>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur inventore cum labore modi earum, odit sit sed quia rem odio dicta magni architecto minus tempora saepe aperiam! Perspiciatis, amet possimus.
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, id ad temporibus eaque facilis fuga impedit, esse modi, libero quis maiores alias dignissimos cupiditate doloremque ea voluptatibus ipsam doloribus magni.
        </center>
    </div>
    <div class="div2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus qui veritatis doloribus doloremque quod voluptatem unde, ipsum beatae eius commodi tempora optio suscipit, quas, quidem velit! Sit iste ullam reiciendis!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde similique et esse soluta odit fuga impedit maiores nisi dolore aspernatur consequuntur maxime ab animi fugit vitae, illo, tenetur debitis. Molestiae!

    </div>
    <pre>
        <!-- 例子：可以展示代码
        预格式化文本-保留空格，tab，回车（相当于） -->
        div{
            width: 200px;
            height: 250px;
            background-color: aliceblue;
            overflow: auto;
            }
    </pre>
    <!-- <div>
        如果直接这样写就没有格式 
        div{
            width: 200px;
            height: 250px;
            background-color: aliceblue;
            overflow: auto;
            }
    </div> -->
</body>
</html>